<template lang="">
    <div>
        <br />
        <myheader/>

        <div class="container">

          <div class="item_column">
              <div class="left">   
                  
              </div>

              <div class="right"> 
                  
                  <br />
                  <br />
                    <div>
                        <table>
                            <tr v-for='(i,index) in list'>
                                <td><van-field :label='i.label' v-model='names[index]'/></td>
                                <td>
                                    <select v-model='typevalues[index]'>
                                        <option value="input">输入框</option>
                                        <option value="radio">单选框</option>
                                        <option value="checkbox">多选框</option>
                                        <option value="select">下拉框</option>
                                        <option value="datetime">日期</option>
                                        <option value="file">文件</option>
                                    </select>
                                </td>
                                <td>
                                    <van-field label='值' v-model='values[index]'/>
                                    <van-button @click='getsource(index)'>选择数据源</van-button>
                                </td>
                            </tr>
                        </table>
                        <van-button @click='add'>+</van-button>
                        <van-button @click='submit'>提交</van-button>
                
                        <el-dialog v-model="dialogTableVisible" title="Shipping address">
                            <el-table
                            ref="singleTable"
                            :data="tableData"
                            highlight-current-row
                            style="width: 100%"
                            @current-change="handleCurrentChange"
                        >
                            <el-table-column type="index" width="50" />
                            
                            <el-table-column property="name" label="Name" width="120" />
                            
                        </el-table>
                        
                        </el-dialog>
                        
                    </div>
                   
              </div>
            </div>
        </div>
    </div>
</template>
<script>
import maxios from '../http/axios'
import myheader from './myheader.vue'


export default {
    components: {
        'myheader':myheader,
    },

    data(){
        return{
            list:[{'label':'名称'}],
            names:{},
            typevalues:{},
            values:{},
            dialogTableVisible:false,
            gridData:[{'id':1,'name':'请假类型数据源'},{'id':2,'name':'会议地址数据源'}],
            tableData: [],
            id:this.$route.query.id
    }
    },
    methods: {
        add(){
            this.list.push({'label':'名称'})
        },
        submit(){
            //获取输入的所有值
            let tlist=[]
            for(var i=0;i<this.list.length;i++){
                let dict = {'lable':this.names[i],'type':this.typevalues[i],'values':this.values[i]}
                tlist.push(dict)
            }
        },
        //添加数据源
        getsource(index){
            localStorage.setItem('index',index)
            maxios('getresourcedata','get').then(res=>{
                this.tableData = res.list
            })
            this.dialogTableVisible=true
        },
       
    handleCurrentChange(val) {
        this.dialogTableVisible=false
        let index = localStorage.getItem('index')
        this.values[index] = JSON.stringify(val['mes'])
        
    },
    },
}
</script>
<style lang="">
    
</style>